window.onload = function(){
	const mainPage = document.getElementById('mainPage');
	const categoryPage = document.getElementById('categoryPage');
	const themePage = document.getElementById('themePage');
	const minePage = document.getElementById('minePage');
	
	const pageList = [mainPage,categoryPage,themePage,minePage];
	
	const mainItem = document.getElementById("mainItem");
	const categoryItem = document.getElementById("categoryItem");
	const themeItem = document.getElementById("themeItem");
	const mineItem = document.getElementById("mineItem");
	
	
	showPage(pageList,themePage);
	
	mainItem.onclick = function(){
		showPage(pageList,mainPage);
	}
	
	categoryItem.onclick = function(){
		showPage(pageList,categoryPage);
	}
	
	themeItem.onclick = function(){
		showPage(pageList,themePage);
	}
	
	mineItem.onclick = function(){
		showPage(pageList,minePage);
	}
	
	function showPage(pageList,showPage){
		pageList.forEach(item=>{
			item.style.display = 'none';
		})
		showPage.style.display = 'block';
	}
	
	let startPageX = 0;
	
	const topSrcoll = document.getElementById('topScroll')
	
	const touchItemWrapper = document.getElementById('touchItemWrapper')
	
	
	const itemWrapperWidth = touchItemWrapper.clientWidth
	
	const screenWidth = topSrcoll.clientWidth
	
	topSrcoll.addEventListener('touchmove',function(e){
		let moveX = startPageX - e.touches[0].pageX;
		let currentLeft = touchItemWrapper.style.left === '' ? 0 : parseFloat(touchItemWrapper.style.left);
		let currentMoveX = currentLeft + (moveX * -1) *0.05
		if(currentMoveX > 0){
			return
		}
		if(currentMoveX < screenWidth - itemWrapperWidth){
			return
		}
		touchItemWrapper.style.left = currentMoveX + 'px'
		
	})
	topSrcoll.addEventListener('touchstart',function(e){
		startPageX = e.touches[0].pageX;
	})
}

